// -----------------------------------------------------------------
// DemoCard
// -----------------------------------------------------------------

.DemoCard {
  --radius: .75rem;
  position: relative;

  display: flex;
  flex-direction: column;

  border-radius: var(--radius);
  border: 1px solid var(--bs-secondary-bg-subtle);

  transition: color 250ms ease-in-out, transform 750ms ease-in-out, box-shadow 750ms ease-in-out;
  transform: translateY(0);
  box-shadow: 0 0 0 transparent;
  background: var(--bs-body-bg);
}

.DemoCard:hover {
  transition: color 250ms ease-in-out, transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
  transform: translateY(-.25rem);
  box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle);
}

.DemoCard__media {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: grid;
  width: 100%;
  min-height: 100px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-content: center;
  background: #000;
}

.DemoCard__image {
  max-width: 100%;
  display: block;
  object-fit: cover;
  opacity: .90;
}

.DemoCard:hover .DemoCard__image {
  opacity: .93;
}

.DemoCard__content {
  padding: .75rem 1rem;
  flex: 1;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  gap: .5rem;
  display: flex;
  flex-direction: column;
}

.DemoCard__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  font-family: var(--font-family-title);
}

.DemoCard__description {
  font-size: 0.9rem;
  font-stretch: semi-condensed;
  font-weight: 400;
  transition: all 250ms ease-in-out;
  opacity: .65;
  line-height: 1.4;
  margin: 0;
}

.DemoCard:hover .DemoCard__description {
  opacity: .85;
}

.DemoCard__tags {
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
